<script setup>
  import { orderListApi } from '@/server/order.js'
  import { ref } from 'vue'

  const feedTabs = ref([
    // { label: '全部', rendered: true, list: [] },
    { label: '待支付', rendered: false, list: [], status: 10, isData: false },
    { label: '待发货', rendered: false, list: [], status: 11, isData: false },
    { label: '待收货', rendered: false, list: [], status: 12, isData: false },
    { label: '已完成', rendered: false, list: [], status: 13, isData: false },
    { label: '已取消', rendered: false, list: [], status: 14, isData: false },
  ])

  // 页码
  const pageCurrent = ref(1)

  // 页数
  const pageSize = ref(10)

  // 选中的值
  const activeIndex = ref(0)

  // 是否再执行获取数据
  const isDataShow = ref(false)

  // 获取订单列表
  async function getOrderList(status, pageCurrent, pageSize, aIndex) {
    if (feedTabs.value[aIndex].isData) return

    if (isDataShow.value) {
      return uni.utils.toast('没有更多数据了')
    }

    const { data } = await orderListApi(status, pageCurrent, pageSize)
    feedTabs.value[aIndex].list.push(...data.data.rows)
    feedTabs.value[aIndex].isData = true
    // 下拉刷新为false
    isRefsher.value = false
    // 是否还能获取数据
    if (pageCurrent >= data.data.pageTotal) isDataShow.value = true
  }

  getOrderList(
    // 状态
    feedTabs.value[activeIndex.value].status,
    // 页码
    pageCurrent.value,
    // 页数
    pageSize.value,
    // 选中的值
    activeIndex.value
  )

  // 切换tab栏目
  function onActivefn(item, index) {
    // 页码为1
    pageCurrent.value = 1
    // 选中的下拉值
    activeIndex.value = index
    feedTabs.value[index].rendered = true
    // 获取数据为false表示获取
    isDataShow.value = false
    // 获取数据
    getOrderList(
      item.status,
      pageCurrent.value,
      pageSize.value,
      activeIndex.value
    )
  }

  // 是否已经下拉刷新
  const isRefsher = ref(false)

  // 下拉刷新被触发
  function onRefreSherrfn() {
    isRefsher.value = true
    feedTabs.value[activeIndex.value].isData = false
    feedTabs.value[activeIndex.value].list = []
    pageCurrent.value = 1

    getOrderList(
      feedTabs.value[activeIndex.value].status,
      pageCurrent.value,
      pageSize.value,
      activeIndex.value
    )
  }

  // 滑动到最底部触发
  function onScrollBottomfn() {
    feedTabs.value[activeIndex.value].isData = false
    pageCurrent.value += 1

    getOrderList(
      feedTabs.value[activeIndex.value].status,

      pageCurrent.value,
      pageSize.value,
      activeIndex.value
    )
  }
</script>

<template>
  <view class="medicine-page">
    <view class="order-status-tabs">
      <tab-curcom @click="onActivefn" :list="feedTabs"></tab-curcom>
    </view>
    <scroll-view
      refresher-enabled
      refresher-background="#f6f6f6"
      :refresher-triggered="isRefsher"
      @refresherrefresh="onRefreSherrfn"
      @scrolltolower="onScrollBottomfn"
      class="uni-scroll-view"
      scroll-y
    >
      <view class="order-list">
        <view
          class="order-list-item"
          v-for="item in feedTabs[activeIndex].list"
          :key="item.id"
        >
          <view class="order-header">
            <text class="number">订单编号:{{ item.orderNo }}</text>
            <text class="status">{{ feedTabs[activeIndex].label }}</text>
          </view>
          <navigator
            :url="`/subpack_medicue/orderDetail/orderDetail?id=${item.id}`"
            hover-class="none"
            class="order-body"
          >
            <view
              class="medicine"
              v-for="medicItem in item.medicines"
              :key="medicItem.id"
            >
              <image
                class="medicine-cover"
                :src="medicItem.avatar"
                mode="aspectFill"
              />
              <view class="medicine-info">
                <text class="name">{{ medicItem.name }}</text>
                <text class="unit symbol">{{ medicItem.specs }}</text>
                <text class="price">¥{{ medicItem.amount }}</text>
              </view>
              <view class="quantity">x{{ medicItem.quantity }}</view>
            </view>
          </navigator>
          <view class="order-footer">
            <view class="total"
              >共{{ item.medicines.length }}件商品 合计：¥{{
                item.actualPayment
              }}
              （运费¥{{ item.expressFee }}）</view
            >
            <view class="buttons">
              <button class="uni-button minor">取消订单</button>
              <button class="uni-button">继续支付</button>
            </view>
          </view>
        </view>
        <!-- 加载状态 -->
        <!-- <uni-load-more
          status="loading"
          color="#C3C3C5"
          :icon-size="16"
          :content-text="{
            contentdown: '上拉显示更多',
            contentrefresh: '数据正在加载中',
            contentnomore: '没有更多数据了',
          }"
        /> -->
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
